<template>
  <div class="picture-box">
    <div class="picture-wrapper">
        <img src="https://via.placeholder.com/185x185" alt="">
        <span class="icon-replace" title="替换图片" @click="replace"></span>
    </div>
    <div class="pic-desc text-center">
      IPC-HFW8241E-Z IPC-HFW8241E-Z IPC-HFW8241E-Z IPC-HFW8241E-Z<el-checkbox v-if="hasCheckbox" @change="changed" v-model="checked"></el-checkbox>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      };
    },
    props: {
      data: Object,
      hasCheckbox: Boolean
    },
    methods: {
      replace(pictureItem = {todo: 'todo'}) {
        this.$emit('replace', pictureItem)
      },
      changed(value) {
        this.$emit('checked', value)
      }
    }
  }
</script>

<style scoped>
  @import './index.css';

  .picture-box >>> .el-checkbox {
    margin-left: 10px;
  }
</style>
